<template>
    <div class="art-card" v-if="item">
        <h2 class="title">
            <div class="title-info">
                <router-link
                    class="title-item"
                    :to="{
                        name: 'blog',
                        params: { id: item.id },
                    }"
                >
                    {{ item.title }}
                </router-link>
                <span class="top-warp" v-if="item.weight != 0">置顶</span>
            </div>
            <div class="there-colors-ball">
                <span style="background-color: red"></span>
                <span style="background-color: orange"></span>
                <span style="background-color: green"></span>
            </div>
        </h2>
        <p class="content" @click="toBlog(item.id)">
            {{ item.summary }}
        </p>
        <div class="time-arch">
            <div class="time">
                <span class="time-icon">
                    <i class="iconfont icon-folder"></i>
                </span>
                <span class="time-desc" style="vertical-align: middle"
                    >发表于
                </span>
                <span class="time-content">{{ item.createDate }}</span>
            </div>
            <div class="arch">
                <span class="arch-icon">
                    <i class="iconfont icon-folder"></i>
                </span>
                <span class="arch-desc" style="vertical-align: middle"
                    >分类于
                </span>
                <span class="arch-content">
                    {{ item.category.categoryName }}
                </span>
            </div>
        </div>
        <div class="tags-warp multiport-hide" v-show="item.tags.length !== 0">
            <div class="tags">
                <span class="iconfont icon-tag" style="color: #5d5a5a"></span>
                <div class="tags-list">
                    <span class="tag" v-for="tag in item.tags" :key="tag.id">{{
                        tag.tagName
                    }}</span>
                </div>
                <span class="where iconfont icon-diannao_o"></span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'blog-card',
    props: {
        item: {
            type: Object,
            default: null,
        },
    },
}
</script>
<style lang="less" scoped>
@keyframes blog-title-fade {
    from {
        transform: translateY(10px);
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes blog-tag-fade {
    from {
        transform: translateY(10px);
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.art-card {
    position: relative;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 6px;
    background-color: #fff;
    border: 1px solid #ebebeb;
    box-shadow: 0 1px 3px rgba(18, 18, 18, 0.1);
    .title-info {
        position: relative;
        .top-warp {
            letter-spacing: 1px;
            position: absolute;
            top: 50%;
            right: 0px;
            padding: 5px 10px;
            background-color: #f8f5f2;
            color: var(--default);
            font-size: 12px;
            border-radius: 5px;
            transform: translateY(-50%) translateX(130%);
        }
    }

    .title {
        cursor: pointer;
        height: 22px;
        // padding-left: 10px;
        margin-bottom: 20px;
        line-height: 24px;
        font-size: 20px;
        // border-left: 4px solid var(--default);
        animation: blog-title-fade 0.6s ease-out 1;
        font-family: 'Prompt', sans-serif;
        display: flex;
        justify-content: space-between;
        &:hover {
            color: #175199;
        }
        .top-warp-mobile {
            display: none;
            vertical-align: top;
            font-size: 20px;
        }
        .there-colors-ball {
            white-space: nowrap;
            span {
                display: inline-block;
                width: 10px;
                height: 10px;
                border-radius: 50%;
                margin: 5px;
            }
        }
    }
    .content {
        font-size: 15px;
        font-weight: 400;
        color: rgb(102, 97, 97);
        overflow: hidden;
        white-space: normal;
        word-break: break-word;
        display: -webkit-box;
        line-height: 2;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        cursor: pointer;
        opacity: 0;
        animation: blog-title-fade 0.6s ease-out 0.4s 1 forwards;
        font-family: 'Average Sans', sans-serif;
    }
    .content:hover {
        text-decoration: underline;
        text-underline-offset: 2px;
    }
    .time-arch {
        display: flex;
        opacity: 0;
        width: 100%;
        height: 20px;
        margin-top: 8px;
        padding: 20px 2px;
        align-items: center;
        animation: blog-title-fade 0.6s ease-out 0.6s 1 forwards;

        .time {
            margin-right: 10px;
            font-size: 10px;
            color: #aaa;
            .time-icon {
                margin-right: 3px;
                vertical-align: bottom;
            }
            .time-content {
                vertical-align: middle;
                border-bottom: 1px dashed #999;
            }
        }
        .arch {
            color: #aaa;
            margin-left: 10px;
            font-size: 10px;
            .arch-icon {
                margin-right: 3px;
                vertical-align: bottom;
            }
            .arch-content {
                vertical-align: middle;
                border-bottom: 1px solid #999;
            }
        }
    }
    .tags-warp {
        margin-top: 10px;

        .tags {
            opacity: 0;
            animation: blog-tag-fade 0.6s ease-out 0.8s 1 forwards;
            display: flex;
            position: relative;
            align-items: center;
            .where {
                position: absolute;
                right: 0px;
                top: 50%;
                transform: translateY(-50%);
            }
            .icon-tag {
                background-color: #f9f9ff;
                border-radius: 10px;
                font-size: 20px;
                margin-right: 20px;
                padding: 4px;
            }
            .tags-list {
                display: flex;
                justify-content: flex-end;
                align-items: flex-end;
                overflow: hidden;
                color: rgb(93, 90, 90);
                .tag {
                    background-color: #f9f9ff;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    padding: 2px 6px;
                    margin-right: 10px;
                    font-size: 10px;
                    padding: 8px;
                    border-radius: 10px;
                }
            }
        }
    }
}
</style>
